<template>
    <div class="user-selector">
      <h1>选择用户</h1>
  
      <div class="search-container">
        <input type="text" v-model="searchQuery" placeholder="搜索内容" @input="searchUsers" />
      </div>
  
   
      <div class="department-selector">
        <select v-model="selectedDepartment" @change="searchUsers">
          <option value="">选择部门</option>
          <option value="总经办">总经办</option>
          <option value="市场部">市场部</option>
          <option value="财务部">财务部</option>
          <option value="研发部">研发部</option>*-
        </select>
      </div>
  
      <table>
        <thead>
          <tr>
            <th>
              <input type="checkbox" @change="toggleAllSelection" :checked="isAllSelected" />
            </th>
            <th>用户名</th>
            <th>姓名</th>
            <th>部门</th>
            <th>手机号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in filteredUsers" :key="user.username">
            <td>
              <input type="checkbox" v-model="selectedUsers" :value="user" />
            </td>
            <td>{{ user.username }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.department }}</td>
            <td>{{ user.phone }}</td>
            <td>
              <button @click="editUser(user)">编辑</button>
              <button @click="deleteUser(user)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchQuery: '',
        selectedDepartment: '',
        users: [
       
          { username: 'user1', name: '张三', department: '总经办', phone: '1234567890' },
          { username: 'user2', name: '李四', department: '市场部', phone: '0987654321' },
      
        ],
        selectedUsers: [],
      };
    },
    computed: {
      filteredUsers() {
        return this.users.filter(user =>
          user.username.toLowerCase().includes(this.searchQuery.toLowerCase()) &&
          (this.selectedDepartment === '' || user.department === this.selectedDepartment)
        );
      },
      isAllSelected() {
        return this.filteredUsers.length > 0 && this.filteredUsers.every(user => this.selectedUsers.includes(user));
      },
    },
    methods: {
      searchUsers() {
      
      },
      toggleAllSelection() {
        if (this.isAllSelected) {
          this.selectedUsers = [];
        } else {
          this.selectedUsers = this.filteredUsers.map(user => user);
        }
      },
      editUser() {
     
      },
      deleteUser() {
    
      },
    },
  };
  </script>
  
  <style scoped>
  .user-selector {
    max-width: 800px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
  }
  
  h1 {
    text-align: center;
  }
  
  .search-container,
  .department-selector {
    margin-bottom: 10px;
  }
  
  input[type="text"],
  select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    box-sizing: border-box;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background-color: #f2f2f2;
  }
  
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  </style>
  